<template>
  <div>

    <div class="box">
      
      <el-button type="success" @click="pan_tow = 1" class="tan">添加</el-button>
    </div>

    <template>
      <el-table :data="ass" style="width: 100%">
        <el-table-column label="ID" >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="图片" >
          <template slot-scope="scope">
            <img :src="scope.row.url" style="width: 5vw; " alt="">
          </template>
        </el-table-column>

        <el-table-column label="分类" >
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button size="mini" type="warning" @click="detail(scope.row.id)">详情</el-button>

          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="box_one" v-if="pan == 1">

      <div class="box_tow">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>


        <template class="dan">
          <el-radio v-model="radio" label="1">首页</el-radio>
          <el-radio v-model="radio" label="2">咨询</el-radio>
          <el-radio v-model="radio" label="3">生活</el-radio>
          <el-radio v-model="radio" label="4">其他</el-radio>
        </template>
        <br>
        <button @click="ji()" class="tan_one">编辑</button>
        <button @click="pan = 0" class="tan_one">取消</button>
      </div>

    </div>

    <div class="box_one" v-if="pan_one == 0">
      <div class="box_tow">
        <img :src="arr.url" width="50%" height="50%" alt="">
        <p>id:{{ arr.id }}</p>
        <p>类型:{{ arr.type }}</p>
        <button @click="pan_one = 22">关闭</button>
      </div>
    </div>

    <div style="margin-left:25vw;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-size="queryInfo.pagesize" :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next ,jumper" :total="total">
      </el-pagination>
    </div>


    <div class="box_one" v-if="pan_tow == 1">

      <div class="box_tow">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>


        <template class="dan">
          <el-radio v-model="radio" label="1">首页</el-radio>
          <el-radio v-model="radio" label="2">咨询</el-radio>
          <el-radio v-model="radio" label="3">生活</el-radio>
          <el-radio v-model="radio" label="4">其他</el-radio>
        </template>
        <br>
        <button @click="tian()" class="tan_one">添加</button>
        <button @click="pan_tow = 0" class="tan_one">取消</button>

      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ass: [],
      imageUrl: '',
      radio: "1",
      pan: 0,
      bian: 0,
      pan_one: 1,
      arr: {},
      total: 0,
      queryInfo: {
        query: '',
        pagenum: 1,  // 页数
        pagesize: 2  // 个数
      },
      pan_tow:0,
    }
  },
  mounted() {
    this.add()
  },
  methods: {
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize
      this.add()
    }, handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.add()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    add() {
      this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/getImgList').then(res => {
        this.total = res.data.data.length
        this.bes()
      })
    },
    bes() {
      let res ={
        page:this.queryInfo.pagenum,
        pagelimit:this.queryInfo.pagesize
      }
      
      this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/getImgList',res).then(res => {
        console.log(res);
        this.ass = res.data.data
      })
    },
    handleDelete(i) {
      console.log(i);

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        let add = {
          id: i
        }
        this.$apiGet('https://goods.zzgoodqc.cn/index.php/index/hao/delBanners', add).then(res => {
          console.log(res);
          this.add()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    tian() {
      let abb = {
        url: this.imageUrl,
        type: this.radio * 1
      }
      this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/addImgs', abb).then(res => {
        this.$alert(res.msg, '标题名称', {
          confirmButtonText: '确定',
        });
        this.add()
        this.pan_tow = 0
        this.imageUrl = ''
      })
    },
    handleEdit(i) {
      this.bian = i
      this.pan = 1
    },
    ji() {
      let abb = {
        url: this.imageUrl,
        type: this.radio,
        id: this.bian
      }
      this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/addImgs', abb).then(res => {
        this.$alert(res.msg, '标题名称', {
          confirmButtonText: '确定',
        });
        this.add()
        this.imageUrl = ''

      })
    },
    detail(i) {
      this.pan_one = 0
      let add = {
        id: i
      }
      this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/hao/getImgsbyid', add).then(res => {
        this.arr = res.data
      })
    }
  }
}
</script>


<style scoped>

.tan_one {
  width: 5vw;
  height: 5vh;
  margin-top: 3vh;
}

.box_tow {
  width: 50vw;
  height: 40vh;
  background: #fff;
  margin: auto;
  text-align: center;
  margin-top: 30vh;
}

.box_one {
  width: 100%;
  height: 99vh;
  background: rgba(33, 30, 30, 0.8);
  position: absolute;
  top: 0px;
  left: 0px;
}

.tan {
  width: 6vw;
  height: 5vh;
  
}

.box {
  width: 100%;
  height: 10vh;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>